<%--
  Created by IntelliJ IDEA.
  User: ��ǫʵ
  Date: 2022/1/8
  Time: 18:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <!-- <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <title>欢迎来到学生论坛</title>

    <style>
        #pic{
            background-color: rgb(216,210,224);
            float: left;
        }
        #operation{
            text-align: center;
            float: right;
            height: 655px;
            background:url(img/operationBackground.png)  repeat-y center;
            width: 30%;
        }
        #change{
            text-align: center;
        }
        #choice1,#choice2{
            text-align: left;
            font-size: 14px;
            font-family:"微软雅黑";
            color: rgb(3, 154, 255);
        }
        #homeTitle{
            font-family:"黑体";
        }
        /* rgb(239,215,221) rgb(226,212,223) */
        .loginButton {
            box-shadow:inset 2px 2px 28px -10px rgb(239,215,221);
            background:linear-gradient(to bottom, rgb(239,215,221) 5%, rgb(226,212,223) 100%);
            background-color:rgb(239,215,221);
            border-radius:8px;
            border:1px solid rgb(226,212,223);
            display:inline-block;
            cursor:pointer;
            color:#ffffff;
            font-family:Arial;
            font-size:21px;
            font-weight:bold;
            padding:10px 16px;
            text-decoration:none;
            text-shadow:2px 3px 0px rgb(226,212,223);
            border: rgb(255, 255, 255) solid 1px;
        }
        #loginButton:active {
            position:relative;
            top:1px;
        }
    </style>

</head>
<body>
<!-- 左侧图片轮播界面 -->
<div id="rotate" class="carousel slide" data-ride="carousel" >
    <!-- 轮播图片 -->
    <div id="pic" class="carousel-inner " style="width: 70%; height: 655px;">
        <div>
            <img src="img/logo.png" alt="logo">
        </div>
        <div class="carousel-item active">
            <img width="100%" height="100%" src="img/jimei01.png" alt="jimei01">
        </div>
        <div class="carousel-item">
            <img width="100%" height="100%" src="img/jimei02.png" alt="jimei02">
        </div>
        <div class="carousel-item">
            <img width="100%" height="100%" src="img/jimei03.png" alt="jimei03">
        </div>
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#rotate" data-slide-to="0"></li>
            <li data-target="#rotate" data-slide-to="1" class="active"></li>
            <li data-target="#rotate" data-slide-to="2"></li>
            <!-- <li data-target="#rotate" data-slide-to="3"></li>
            <li data-target="#rotate" data-slide-to="4"></li>  -->
        </ul>
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#rotate" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#rotate" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>

<!-- 右侧操作界面 -->
<div id="operation">
    <br><br>
    <h1 id="homeTitle">学生在线论坛</h1>
    <br>
    <!-- 选择用户登录权限 -->
    <ul id="chooseJurisdiction" class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#choice1">普通用户</a>
        </li>
        <li class="nav-item">
            <a  class="nav-link" data-toggle="tab" href="#choice2">管理员</a>
        </li>
    </ul>
    <!-- 不同权限对应不同form -->
    <div id="chooseJurisdictionTable" class="tab-content">
        <!-- 普通用户 -->
        <div id="choice1" class="container tab-pane active"><br>
            <p>你将拥有普通用户权限</p>
            <!-- 普通用户名&密码的文本框 -->
            <form action="./User/uls" id="user-form" style="text-align: center;">   <!-- action为输入上传表单位置 -->
                <div class="form-group">
                    <input name="username" type="text" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                    <input name="password" type="password" class="form-control" placeholder="密码">
                </div>
                <button type="submit" class="loginButton" id="loginButton1">登 录</button>
            </form>
        </div>
        <!-- 管理员用户 -->
        <div id="choice2" class="container tab-pane fade"><br>
            <p>你将拥有管理员用户权限</p>
            <!-- 管理员用户名&密码的文本框 -->
            <form action="./Manager/mls" id="admin-form" style="text-align: center;">
                <div class="form-group">
                    <input name="manager" type="text" class="form-control" placeholder="管理员用户名">
                </div>
                <div class="form-group">
                    <input name="password" type="password" class="form-control" placeholder="密码">
                </div>
                <button type="submit" class="loginButton" id="loginButton2">登 录</button>
            </form>
        </div>
    </div>

    <!-- 注册跳转 -->
    <div id="register">
        <a href="register.html">
            <button type="submit" class="btn btn-default text-info" style=" float: right;"><small>还没有账号?点我注册</small></button>
        </a>
    </div>
</div>
</body>
<script>
</script>
</html>
